打包优化：分模式打包&打包命令参数传递
概述
本节解决两个打包优化问题：1) 暗黑模式下内容区域样式问题；2) 分环境配置 Vite 插件，使 Element Plus 的 resolver 仅在开发模式生效，避免生产环境将组件库重复打包。
暗黑模式样式修复
问题
暗黑模式下内容区域不跟随主题变化，原因是组件上硬编码了 bg-white 样式。
解决方案
<!-- 修复前 -->
<template>
<div class="bg-white">内容区域</div>
</template>
<!-- 修复后：使用动态 class 绑定 -->
<template>
<div class="bg" :class="isDark ? 'bg-dark' : 'bg-white'">内容区域</div>
</template>
<!-- 或使用 Element Plus 的暗黑模式变量 -->
<template>
<div class="bg" style="background-color: var(--el-bg-color)">内容区域</div>
</template>
vue
分模式配置 Vite
核心思路
Vite 配置可以写成函数形式，接收 { mode } 参数，根据环境决定加载哪些插件：
// vite.config.ts
import { defineConfig, type ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { cdn } from 'vite-plugin-cdn2'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig(({ mode }: ConfigEnv) => {
console.log('当前模式:', mode) // development | production
const isProduction = mode === 'production'
return {
plugins: [
vue(),
// AutoImport：仅开发模式启用 Element Plus resolver
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
resolvers: isProduction ? [] : [ElementPlusResolver()]
}),
// Components：仅开发模式启用 Element Plus resolver
Components({
resolvers: isProduction ? [] : [ElementPlusResolver()]
}),
// CDN：仅生产模式启用
isProduction && cdn({
modules: [
{
name: 'element-plus',
var: 'ElementPlus',
path: 'https://unpkg.com/element-plus/dist/index.full.min.js',
css: 'https://unpkg.com/element-plus/dist/index.css'
}
]
})
].filter(Boolean)
}
})
typescript
mode 值的来源
| 命令 | mode 值 | 说明 |
|---|---|---|
pnpm dev | development | 开发模式 |
pnpm build | production | 生产构建 |
pnpm build --mode staging | staging | 自定义模式 |
配置逻辑对比
| 插件 | 开发模式 | 生产模式 |
|---|---|---|
AutoImport resolvers | ElementPlusResolver() | []（空） |
Components resolvers | ElementPlusResolver() | []（空） |
vite-plugin-cdn2 | 不加载 | 加载 CDN 配置 |
vite-plugin-visualizer | 不加载 | 可选加载 |
条件加载 Element Plus 样式
// main.ts
// 开发模式：本地导入 Element Plus 样式
// 生产模式：由 CDN 加载样式
if (import.meta.env.DEV) {
import('element-plus/dist/index.css')
import('element-plus/theme-chalk/dark/css-vars.css')
}
typescript
注意：不能在顶层使用条件 import，需要用动态 import 的方式。
rollup-plugin-visualizer 按需加载
import { visualizer } from 'rollup-plugin-visualizer'
// 仅在需要分析时加载
const enableAnalyze = process.env.ANALYZE === 'true'
export default defineConfig({
plugins: [
enableAnalyze && visualizer({
open: true,
gzipSize: true,
brotliSize: true
})
].filter(Boolean)
})
typescript
// package.json
{
"scripts": {
"analyze": "ANALYZE=true pnpm build"
}
}
json
实践要点
- Vite 配置使用函数形式
defineConfig(({ mode }) => {})可获取当前环境模式 - Element Plus 的 resolver 仅在开发模式使用，生产模式通过 CDN 加载避免重复打包
- CSS 样式文件需根据环境条件导入，生产环境由 CDN 提供
rollup-plugin-visualizer仅在分析时加载，避免每次构建都生成分析报告- 暗黑模式需使用 CSS 变量而非硬编码颜色值
↑